<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        p {
            font-size: 20px;
        }

        /*
            伪元素,表示页面中一些特殊的并不真实存在的伪元素(特殊的位置)
                伪元素使用::开头
                ::first-letter 表示第一个字母
                ::first-line 表示第一行
                ::selection 表示选中的内容

                下面这两个伪元素选择器经常使用
                ::before 表示元素的开始
                ::after 表示元素的结束
                    - before 和 after 必须结合content属性来使用
         */
        p::first-letter {
            font-size: 50px;
        }

        p::first-line {
            background-color: yellow;
        }

        p::selection {
            background-color: greenyellow;
        }

        /*
          这里是div的最开头
        */
        div::before {
            content: '『';
            color: red;
        }

        /*
          这里是div的最结尾
        */
        div::after {
            content: '』';
            color: blue;
        }


    </style>
  </head>
  <body>

    <div>
      Hello Hello How are you
    </div>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi corporis fuga hic illo repudiandae
      sapiente voluptatum? Accusantium atque beatae doloribus, facere inventore ipsum magnam nesciunt nisi praesentium
      quisquam voluptas!
    </p>

  </body>
</html>
